<script lang="ts">
    import { type NodeProps } from "@xyflow/svelte";
    import NodeWrap from "../common/NodeWrap.svelte";
    import type { ExDrawNodeInfo } from "$lib/api/board/board_draw";
    import { ExternalLink, Link } from "lucide-svelte";
    import { openUrl } from "@tauri-apps/plugin-opener";
    const props: NodeProps = $props();

    const nodeInfo = $derived(props.data as ExDrawNodeInfo);
</script>

<NodeWrap nodeProps={props} showBorder showBgColor showResizer>
    <div class="flex gap-2 pl-1">
        <Link />
        链接
    </div>
    <div
        class={`w-full h-[calc(100%-50px)]  flex items-center justify-center gap-2 text-wrap break-all overflow-hidden`}
    >
        {nodeInfo.content.BasicLinkContent?.link_name ?? ""}
        <button
            type="button"
            onclick={() =>
                openUrl(nodeInfo.content.BasicLinkContent?.link_url ?? "")}
            ><ExternalLink /></button
        >
    </div>
</NodeWrap>
